<template>
	<div class="container">
		<div class="condition-controller">
			<div class='condition' :class='{active: value === "and"}' @click="$emit('input', 'and')">且</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'AndLine',
		props: ['value']
	}
</script>

<style lang="scss" scoped>
	.container{
		height: 100%;
		position: absolute;
		left: -30px;
		border-left: 1px solid #E9F0F7;
		cursor: pointer;
		.condition-controller{
			position: absolute;
			// left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			.condition{
				width: 18px;
				height: 18px;
				background-color: #E9F0F7;
				color: #8492a6;
				text-align: center;
				line-height: 18px;
				font-size: 12px;
			}
			.active{
				background-color: #04cb94;
				color: #FFF;
			}
		}
	}
</style>
